<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:x="http://java.sun.com/jstl/xml">

	<h:head>
		<title>Globallogic vacation planner 1.0</title>
		<link rel="stylesheet" type="text/css" href="css/container.css" />
		<link rel="stylesheet" type="text/css" href="css/userPage.css" />
		<link rel="stylesheet" type="text/css" href="css/editProfile.css" />

	</h:head>

	<h:body bgcolor="silver">
		<div class="container">
			<center>
				<h2>Edit Profile page</h2>

				<div class="poster">
					<a> <img src="images/defaultUser.png" width="160px"
						height="160px" />
					</a>
				</div>
				<div class="links">

					<p align="left">
						<h:form>
							<a href="userPage.xhtml">Home___|___</a>
							<a href="vacation.xhtml">Vacations___|___</a>
							<a href="projects.xhtml">Projects___|___</a>
							<h:commandLink value="Log out" action="#{userBean.logout}" />
						</h:form>
					</p>
				</div>

				<h:form>
					<div class="editArea">
						<h:panelGrid columns="4">
							<!-- User name -->
							<p>
								<h:outputText value="Name:" />
								<h:inputText value="#{userBean.userName}" id="name"
									validatorMessage="You must input yor name">
									<f:validateLength minimum="1" />
									<f:validateRequired />
									<rich:validator />
								</h:inputText>
								<rich:message for="name" />
							</p>

							<!-- User surname -->
							<h:outputText value="Surname" />
							<h:inputText value="#{userBean.surname}" id="surname"
								validatorMessage="You must input yor surname">
								<f:validateLength minimum="1" />
								<f:validateRequired />
								<rich:validator />
							</h:inputText>
							<rich:message for="surname" />

							<!-- Email -->
							<h:outputText value="Email" />
							<h:inputText value="#{userBean.email}" id="email"
								validatorMessage="Invalid email address">
								<f:validateRegex
									pattern="^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$"></f:validateRegex>
								<rich:validator />
							</h:inputText>
							<rich:message for="email" />

							<!-- Password -->
							<h:outputText value="Password:" />
							<h:inputSecret value="#{userBean.password}" id="password"
								validatorMessage="Password must be for 5 to 15 characters length">
								<f:validateLength minimum="5" maximum="15" />
								<f:validateRequired />
								<rich:validator />
							</h:inputSecret>
							<rich:message for="password" />

							<!-- Confirm password -->
							<h:outputText value="Confirm password" />
							<h:inputSecret value="#{userBean.confirmPassword}"
								id="confirmPassword"
								validatorMessage="Password must be for 5 to 15 characters length">
								<f:validateLength minimum="5" maximum="15" />
								<f:validateRequired />
								<rich:validator />
							</h:inputSecret>
							<rich:message for="confirmPassword" />
						</h:panelGrid>
						<h:panelGrid columns="3">
							<a4j:commandButton action="#{userBean.changeProfile}"
								value="submit changes" />
						</h:panelGrid>

						<c:if test="#{not empty userBean.changeProfileMessage}">
							<h3>
								<font color="blue">#{userBean.changeProfileMessage}</font>
							</h3>
						</c:if>
					</div>
				</h:form>

			</center>
		</div>
	</h:body>
</ui:composition>